<template>
  <el-dropdown class="dropdown" @command="handleCommand">
    <span role="img">
      <div class="dropdown_head">
        <svg-icon v-if="iconClass" :iconClass="iconClass" :size="20"></svg-icon>
        <el-avatar v-if="circleUrl" :size="20" :src="circleUrl"></el-avatar>
        <span v-if="!showText" style="margin-left: 5px;">{{ headText }}</span>
        <svg-icon v-if="showDown" icon-class="down" :size="20"></svg-icon>
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="item in dropMenuList" :key="`${item.event}`">
          <el-dropdown-item :command="item" :disabled="item.disabled" :divided="item.divider">
            <span class="dropdown-item" :class="{ isSelect: headText === item.text }">
              <svg-icon v-if="item.icon" :iconClass="item.icon" :size="20"></svg-icon>
              {{ item.text }}
            </span>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { DropMenu } from '..'
import { Recordable } from '/#/global'

const props = defineProps({
  dropMenuList: {
    type: Array as PropType<(DropMenu & Recordable)[]>,
    default: () => []
  },
  selectedKeys: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  headText: {
    type: String,
    default: ''
  },
  showText: { type: Boolean, default: true },
  iconClass: {
    type: String,
    default: ''
  },
  circleUrl: {
    type: String,
    default: ''
  },
  showDown: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['menuEvent'])
const handleCommand = (item: DropMenu) => {
  const { event } = item
  const menu = props.dropMenuList.find(item => `${item.event}` === `${event}`)
  emit('menuEvent', menu)
  item.onClick?.()
}
</script>

<style lang="scss" scoped>
.dropdown {
  --el-font-size-base: 20px;
  .dropdown_head {
    display: inline-flex;
    align-items: center;
  }
}
:deep(.el-dropdown-menu__item) {
  align-items: center;
  justify-content: center;
  align-content: center;
}
.dropdown-item.isSelect {
  color: #0960bd;
}
:deep(.el-dropdown-menu__item:hover) {
  background-color: #e3f4fc;
  color: #0960bd;
}
</style>
